<!--  -->
<template>
<div>
  <div class="activity">
      <p class="hui"></p>
        <div class="activity_title">
            <span>{{race.content}}</span>
            <a href="#">更多<i class="iconfont">&#xe60c;</i></a>
        </div>
        <div class="activity_scroll">
            <div class="chang">
                
                <div class="ac_scroll"  v-for="(item, index) in race.data" :key="index">
               <img :src="item.thumb" alt="">
                <span>{{item.title}}</span>
            </div>
            </div>
        </div>
        <p class="hui"></p>
  </div>
</div>
</template>

<script>
export default {
    props:[
        "race"
    ],
  data () {
    return {
    };
  },
}

</script>
<style scoped lang="scss">
.hui{
    width: 100%;
    height: 0.26666rem;
    background: rgb(247, 244, 244);
}
.activity{
    width: 100%;
    height: auto;
    .activity_title{
    width: 100%;
    height: 1.333333rem;
    line-height: 1.333333rem;
    position: relative;
    span{
        color: #333;
        font-size: 0.426666rem;
        font-weight: 1000;
        margin-left: 0.3666rem;
    }
    a{
      text-decoration: none;
      font-size: 0.346666rem;
      position: absolute;
      right: 0.2666rem;
      color: #999;
    }
  }
  .chang{
      width: 666px;
      display: flex;
      margin-left: .26666rem;
  }
  .activity_scroll{
      width: 100%;
      height: 158px;
      overflow: hidden;
      overflow-x: scroll;
      .ac_scroll{
        width: 50%;
        margin-left: 0.2666rem;
        img{
            width: 100%;
            height: 115px;
            border-radius: 5px;
            background-size: cover;
        }

        span{
            font-size: 16px;
            font-weight: 1000;
            padding-left:0.16666rem;
        }
      }
  }
}
  .activity .activity_title:before {
    content: "";
    display: inline-block;
    width: .1rem;
    height: .5rem;
    background: #fed101;
    position: relative;
    top: .02rem;
}
</style>